<script setup>

import { onMounted, ref, watch } from 'vue';
import * as echarts from 'echarts';

// 接受父组件传递的数据
const props = defineProps({
  data: {
    type: Object,
    require: true
  }
})
//console.log(props.data);
watch(
  () => props.data,
  () => {
    renderChart()
  },
  
  { deep: true }  // 监听对象或数组的深层变化
)
// 获取实例
const target = ref(null)
let myChart = null
onMounted(() => {
  myChart = echarts.init(target.value) // 初始化echarts
  renderChart()
})

// 构建option实例
const renderChart = () => {
  const options = {
    // x轴展示数据
    xAxis:{
      show: false, // x轴不显示
      type: 'value', // 类型是数据
      max: function(value){ // 设置最大值
        return parseInt(value.max * 1.2)
      }
    },
    // y轴展示数据
    yAxis:{
      type: 'category',
      data: props.data.regions.map((item) => item.name),
      inverse: true, //逆向展示
      axisLine: {
        show: false // 显示坐标轴
      },
      axisTick: {
        show: false // 显示坐标刻度
      },
      axisLabel: {
        color: '#9eb1c8'
      }
    },
    // 图表绘制位置
    grid: {
      top: 0,
      left: 0,
      bottom: 0,
      right: 0,
      containLabel: true
    },
    // 核心数据配置
    series: [
      {
        type: 'bar',
        data:props.data.regions.map((item) => ({
          name: item.name,
          value: item.value
        })),
        showBackground: true,
        backgroundStyle:{
          color: 'rgba(180, 180, 180, 0.2)'
        },
        itemStyle:{
          color: '#479AD3',
          barBorderRadius: 5,
          shadowColor: 'rgba(0,0,0,0.3)',
          shadowBlue: 5
        },
        barWidth: 12,
        label: {
          show: true,
          position: 'right',
          textStyle: {
            color: '#fff'
          }
        }
      }
    ]
  }
  // 通过 setOption(options)调用
  myChart.setOption(options)
}

</script>

<template>
  <div>
    <div>【大区数据信息】</div>
    <div ref="target" class="w-full h-full"></div>
  </div>
</template>


<style lang="scss"  scoped>

</style>
